<template>
  <div>
    <div class="top">
      <div class="t-left">
        <van-button icon="arrow-left" class="van-btn" @click="tap()"/>
      </div>
      <div class="t-right">
        <van-search
          v-model="value"
          placeholder="素食"
          show-action
          shape="round"
          @search="onSearch"
        >
          <div class="cancel" slot="action" @click="onCancel">取消</div>
        </van-search>
      </div>
    </div>
    <div class="goods-list">
      <div class="goods-item" v-for="it in list">
        <div class="item-left">
          <img :src="it.pimg">
        </div>
        <div class="item-right">
          
          <p class="info">高筋面粉</p>
          <p class="username">{{it.pname}}</p>
          <p class="sell">
            <span>{{it.pprice}}万浏览</span>
            <span>{{it.pdesc}}万收藏</span>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import axios from "axios";
	// import qs from 'Qs'
  export default {
    name: "Bake",
    data() {
      return {
        value: '',
        list: []
      }
    },
    methods: {
      onSearch() {

      },
      onCancel() {
        this.value = ''
      },
      tap() {
        this.$router.go(-1)
      }
    },
    mounted() {
      axios({
        url: "http://jx.xuzhixiang.top/ap/api/productlist.php",
        params: {uid: 14534}
      }).then(data => {
        this.list = data.data.data;
      });
// 			axios({
// 				// method:'post',
// 				url:'http://10.8.158.36:8080/vegetarianismMenu.do',
// // 			data:qs.stringify({
// // })
// 				params:{id:'id',title:'豆腐'},
// 			
// 
// 			}).then((res)=>{
// 				console.log(res.data.data)
// 				this.list = res.data.data
// 			})
    }
  }
</script>

<style lang="scss" scoped>
	*{margin:0;pdding:0}
  .top {
    display: flex;

    .t-left {
      width: 50px;

      .van-btn {
        border: 0;
        margin-top: 5px;
      }
    }

    .t-right {
      flex: 1;

      .cancel {
        color: red;
      }
    }
  }

  .goods-item {

    height: 100px;
    margin: 20px 0;
    padding: 0 20px;
    display: flex;

    .item-left {
      width: 100px;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .item-right {
      flex: 1;
      padding-left: 15px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      h2 {
        width: 200px;
        font-size: 14px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      p {
        width: 200px;
       
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      .info {
        font-size: 12px;

      }

      .username {
        color: #8E8D8D;
      }

      .sell {
        width: 150px;
        display: flex;
        justify-content: space-between;
      }
    }
  }
</style>
